<template>
  <div class="nav" ref="nav">
    <div class="top" v-if="bool">
      <ul class="nav-list" v-for="(v, i) in list" :key="i">
        
          <li v-for="(e, k) in v.text" :key="k" :class="v.class" @click="change(i,k)">
          <span class="main-nav-wrap"></span>
          <span>{{ e }}</span>
          </li>
      
      
    </ul>
    </div>
    <div class="right" v-else>
      <ul class="nav-list" v-for="(v, i) in list1" :key="i">
       <a href="#"><li v-for="(e, i) in v.text" :key="i" :class="v.class">
          <span class="sub-nav-wrap"></span>
          <span>{{ e }}</span>
      </li></a>
    </ul>
    </div>
    <div class="main">
      <span :class="bool?'click':''"></span>
      <span @click="fun()" :class="bool?'':'click'"></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          text: ["酒店", "民俗/客栈", "特价/爆款"],
          class:"nav-hotal",
          url:''
        },
        {
          text: ["机票", "接送机/包车", "航班助手"],
        class:"nav-flight",
          url:''
        },
         {
          text: ["火车票", "汽车/船票", "租车"],
            class:"nav-train",
          url:'/train'
        },
         {
          text: ["旅游", "门票/活动", "周边游"],
           class:"nav-vacation",
          url:''
        },
         {
          text: ["攻略/景点", "美食", "购物/免税"],
          class:"nav-gs",
          url:''
        },
      ],
       list1: [
        {
          text: ["导向/包车", "邮轮游", "拿去花", "在线商城", "企业商旅"],
          class:"nav-one"
        },
        {
          text: ["保险", "外币兑换", "礼品卡", "携程小诗机", "Trip.com"],
        class:"nav-two"
        },
         {
          text: ["微领队", "签证", "信用卡", "紧急救援"],
            class:"nav-three"
        },
         {
          text: ["一日游", "WiFi电话卡", "会员签到", "加盟合作"],
           class:"nav-four"
        },
         {
          text: ["定制游", "行李寄送", "超级会员", "公司会务"],
          class:"nav-five"
        },
      ],
      bool:true,
    };
  },
  methods: {
    fun(){
     this.bool =! this.bool

    },
    change(i,k){
      if (i==2&&k==0) {
        this.$router.push("/train")
      }
      if (i==3&&k==2) {
        this.$router.push("/travel")
      }
    }
  },
};
</script>

<style scoped>
.nav {
  margin-top: .08rem;
}
.top, .right{
width: 100%;
  display: flex;
  justify-content: space-between;
}
.nav-list {
  width: 25%;
  flex: 1;
}
.nav-hotal:first-child{
  background-color: #fa5956;
  color: #fff !important;
}
.nav-flight:first-child{
  background-color: #3c83fa;
  color: #fff !important;
}
.nav-train:first-child{
  background-color: #66a4ff;
  color: #fff !important;
}
.nav-vacation:first-child{
  background-color: #2fc3b6;
  color: #fff !important;
}
.nav-gs:first-child{
  background-color: #ff8939;
  color: #fff !important;
}
.nav-list li {
  color: #000 !important;
  height: 0.58rem;
  width: 100%;
  font-size: 0.12rem;
  line-height: 0.15rem;
  text-align: center;
  padding-top: .05rem;
}
.nav-hotal{
  background-color: #fff5f1;
}
.nav-flight{
   background-color: #eff9ff;
}
.nav-train{
   background-color: #f2f5ff;
}
.nav-vacation{
   background-color: #ecfcf8;
}
.nav-gs{
   background-color: #fff9f2;
}
.main-nav-wrap{
  margin-left: 0.25rem;
  margin-bottom: 0.05rem;
  display: block;
  background: url(https://webresource.c-ctrip.com/NFES/html5/1636624442314/_next/serverStatic/img/nav.png);
  background-size: 0.28rem auto;
  width: 0.28rem;
  height: 0.28rem;
}
.sub-nav-wrap{
  margin-left: 0.2rem;
  margin-bottom: 0.05rem;
  display: block;
  background: url(https://webresource.c-ctrip.com/NFES/html5/1636624442314/_next/serverStatic/img/subnav.png);
  background-size: 0.28rem auto;
  width: 0.28rem;
  height: 0.28rem;
}
.nav-hotal .main-nav-wrap {
  background-position: 0 -0.84rem;
}
.nav-flight .main-nav-wrap{
   background-position: 0 -1.68rem;
}
.nav-train .main-nav-wrap{
   background-position: 0 -3.64rem;
}
.nav-vacation .main-nav-wrap{
background-position: 0 -1.4rem;
}
.nav-gs .main-nav-wrap{
background-position: 0 -.28rem;
}
.nav-one .sub-nav-wrap{
  background-position: 0 -0.84rem;
}
.nav-two .sub-nav-wrap{
  background-position: 0  0rem;
}
.nav-three .sub-nav-wrap{
  background-position: 0 -4.2rem;
}
.nav-four .sub-nav-wrap{
  background-position: 0 -5.02rem;
}
.nav-five .sub-nav-wrap{
  background-position: 0 -1.68rem;
}
.main{
  width: 100%;
  text-align: center;
}
.main span{
  display: inline-block;
  width: .05rem;
  height: .05rem;
  margin: .05rem .05rem;
  border-radius: 50%;
  background-color: gray;
}
.main .click{
  width: .18rem;
  height: .05rem;
  background-color: #2fc3b6;
  border-radius: .1rem;
}
</style>